<template>
    <div class="dbx">
        <el-container class="box">
            <el-header height="100px">
                <div>
                    <img width="300px" height="90px" src="../assets/logo.png" alt="">
                </div>
                <div>
                    <img src="../assets/advert.png" alt="">
                </div>
                <div class="user">
                    欢迎 <b class="xm">{{getCookie('adminname')}}</b> 上线
                    <el-button type="danger" plain @click="onclick">注销</el-button>
                </div>
            </el-header>
                <el-container>
                    <el-aside width="200px">
                        <el-row class="tac">
                            <el-col :span="12">
                                <el-menu 
                                    default-active="0"
                                    class="el-menu-vertical-demo"
                                    :router="true"
                                    >
                                    <el-submenu v-for="(item,index) in auths" :key="item._id" :index="'' + index" v-if="item.isShow">
                                        <template slot="title">
                                            <i :class= item.icon ></i>
                                            <span>{{ item.name }}</span>
                                        </template>
                                        <el-menu-item v-for="son in item.children" :key="son._id" v-if="son.isShow" :index="son.path">
                                            <template slot="title">{{son.name}}</template>
                                        </el-menu-item> 
                                    </el-submenu>
                                </el-menu>
                            </el-col>
                        </el-row>
                    </el-aside>
                    <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                    <el-footer>Footer</el-footer>
                    </el-container>
                </el-container>
        </el-container> 
    
    </div>
</template>

<script>
import { getCookie,removeCookie } from '@/utils/cookie';
import { dataCount } from '@/request'
export default {
    data () {
        return {
            auths:sessionStorage.getItem('auths') ? JSON.parse(sessionStorage.getItem('auths')) : []
        }
    },
    methods: {
        getCookie,
        onclick(){
            this.$confirm('你真的要残忍离开吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    // 清除缓存
                    removeCookie('adminname')
                    removeCookie('adminId')
                    localStorage.removeItem('adminToken')
                    sessionStorage.removeItem('auths')
                this.$message({
                    type: 'success',
                    message: '退出成功!',
                    duration: 1500,
                    onClose:() => {
                        this.$router.push('/login')
                    }
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已留下'
                });          
            });
        },
        // async GetdataCount() {
            // let data = await dataCount()
            // console.log(data);
            // let { error_code,msg } = data
            // if(error_code = 200) {
            //     this.$message({
            //         message: msg,
            //         type: 'success'
            //     });
            // } else {
            //     this.$message({
            //         message: msg,
            //         type: 'error'
            //     });
            // }
        // }
    },
    created() {
        // this.GetdataCount()
    }
}
</script>

<style lang="scss" scoped>
.dbx{
    height: 100%;
}
.box{
    width: 100%;
    height: 100%;
}
.user{
    margin-right: 30px;
}
    .el-header{
        height: 100p !important;
        // background-color: whitesmoke;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .el-aside{
        background-color: rgb(144, 144, 144);
    }
    .el-main{
        background-image: url(../assets/ed278b88d21defa81b275bb6c26046ea.jpg); 
        // opacity: 0.8;
        background-repeat: no-repeat;
        background-size: 100%;
        // background-position: 50%;
        
        // background-color: pink;
        
    }
    .el-footer{
        background-color: paleturquoise;
    }
    .xm{
        margin: 5px 10px ;
        font-size: 20px;
        color: pink;
    }
    .el-col-12{
        width: 100%;
    }
</style>
